<template>
    <div class="login-page">
      <div class="left-section">
        <div class="background-image">
          <h1 class="system-title">综合缴费管理系统</h1>
        </div>
      </div>
      <div class="right-section">
        <div class="login-form">
          <h2>登录</h2>
          <form>
            <div class="form-group">
              <label for="username">用户名</label>
              <input type="text" id="username" v-model="username" />
            </div>
            <div class="form-group">
              <label for="password">密码</label>
              <input type="password" id="password" v-model="password" />
            </div>
            <button type="submit">登录</button>
          </form>
        </div>
      </div>
    </div>
  </template>
<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
    // 发送登录请求
      fetch('http://localhost:8081/user/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          username: this.username,
          password: this.password
        })
      })
        .then(response => response.json())
        .then(data => {
          // 处理登录成功的逻辑
          console.log('登录成功', data)
        })
        .catch(error => {
          // 处理登录失败的逻辑
          console.error('登录失败', error)
        })
    }
  }
}
</script>
  <style>
  .login-page {
    display: flex;
    height: 100vh;
    background-color: #eaf2f8;
  }
  .left-section {
    flex: 0 0 60%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .background-image {
    background-image: url('../img/红色岩石.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .system-title {
    font-family: '楷体';
    font-size: 32px;
    color: white;
  }
  .right-section {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: left;
    padding-top: 20px;
  }
  .login-form {
    background-color: rgb(92, 165, 169);
    padding: 30px;
    text-align: left;
    height: 100%;
    width: 95%;
    padding-top: 50%;
  }
  h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .form-group {
    margin-bottom: 20px;
  }
  label {
    font-weight: bold;
  }
  input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>
